import 'package:flutter/material.dart';

/// Card是Flutter中的卡片组件，用来声明局部页面布局
/// color 卡片背景色
/// shadowColor 阴影颜色
/// elevation 阴影高度
/// shape 边框样式
/// RoundedRectangleBorder
/// borderOnForeground 是否在 child 前绘制 border，默认为 true
/// margin 外边距
/// clipBehavior 裁切方式
/// child 子组件
/// semanticContainer 是否使用新的语义节点，默认为 true
class CardPage extends StatefulWidget {
  const CardPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CardPageState();
}

class _CardPageState extends State<CardPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Card(
            margin: EdgeInsets.all(30),
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(
                    Icons.supervised_user_circle_outlined,
                    size: 50,
                  ),
                  title: Text("张三", style: TextStyle(fontSize: 28)),
                  subtitle: Text("董事⻓"),
                ),
                Divider(),
                ListTile(
                  title: Text("电话: 123456789"),
                ),
                ListTile(title: Text("地址：xxxxxxxxxxxxxxxxx"))
              ],
            ),
            color: Colors.purpleAccent[100],
            shadowColor: Colors.yellow,
            // 阴影颜⾊
            elevation: 20,
            // 阴影⾼度
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(40),
              side: BorderSide(
                color: Colors.yellow,
                width: 3,
              ),
            ),
          ),
          Card(
            margin: EdgeInsets.all(30),
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text("李四", style: TextStyle(fontSize: 28)),
                  subtitle: Text("CEO"),
                ),
                Divider(),
                ListTile(
                  title: Text("电话:123456789"),
                ),
                ListTile(title: Text("地址：xxxxxxxxxxxxxxxxx"))
              ],
            ),
          )
        ],
      ),
    );
  }
}
